<template>
  <div class="control-record flex flex-column">
    <antd-form :options="options" @submit="formSubmit" class="flex-fixed" style="margin-bottom: 15px" />
    <common-table
      ref="table"
      class="flex-auto-height"
      :fetch-params="paramsData"
      :fetch="getDataAsync"
      :show-toolbar="false"
      @vue:mounted="() => $refs.table.load()"
      :columns="columns"
    >
      <template #avatar="{ text }">
        <avatar style="width: 50px" :src="text" />
      </template>
      <template #action="{ text, scope }">
        <span style="color: #62b8b1; cursor: pointer" @click="goDetails(scope)">详情</span>
      </template>
    </common-table>
  </div>
</template>

<script>
import { hotelRoomOperateRecord } from '@gis/lib/api';
import Avatar from '@gis/lib/components/img-viewer/avatar-card.vue';

import { openPeopleDetailsDialog } from '../../reality-people/people-details/peopleDetailsDialog.js';

export default {
  name: 'control-record.vue',
  components: { Avatar },
  props: {
    details: { type: Object, default: () => {} },
  },
  data() {
    return {
      operate: undefined,
      formData: {
        operate: '',
      },
      operateList: [
        { label: '锁定', value: 1 },
        { label: '解锁', value: 2 },
      ],
      columns: [
        {
          title: '操作类型',
          dataIndex: 'operate',
          customRender: (v) => ({ 1: '锁定', 2: '解锁' }[v]),
        },
        {
          title: '操作原因',
          dataIndex: 'reason',
        },
        {
          title: '操作时间',
          dataIndex: 'create_time',
        },
      ],
    };
  },
  computed: {
    options() {
      return [
        {
          component: 'a-select',
          label: '',
          field: 'operate',
          wrapperCol: 24,
          props: {
            options: this.operateList,
          },
        },
      ];
    },
    paramsData() {
      return Object.assign({ room_id: this.details.room_id }, this.formData);
    },
  },
  methods: {
    formSubmit(data) {
      this.formData = data;
      this.$nextTick(() => {
        this.$refs.table.load();
      });
    },
    goDetails(details) {
      openPeopleDetailsDialog(details);
    },
    async getDataAsync(params) {
      if (!params.room_id) return;
      const { data = {} } = await hotelRoomOperateRecord(params);
      return { data: data.list, total: data.count };
    },
  },
};
</script>

<style scoped lang="less">
.control-record {
  width: 100%;
  height: 100%;
}
</style>
